<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        margin-top: 50px;
    }
    .mask {
        background-color: rgba(0, 0, 0, 0.5);
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }

    .con {
        width: 300px;
        height: 200px;
        border-radius: 3px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

</style>

<body>
    <div class="container">
        <div id="app">
            <input type="text" class="form-control" placeholder="请输入图书名称" v-model.trim="username"
                @keydown.enter="addUser">
            <hr>
            <table class="table" border="1" style="border-collapse: collapse;" width="500">
                <thead>
                    <tr style="background-color: #eeeeee;">
                        <th>id</th>
                        <th>书名</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr v-for="(item,index) in persons" :key="item.id">
                        <td>{{index+1}}</td>
                        <td>{{item.username}}</td>
                        <td>{{item.addTime}}</td>
                        <td><button  @click="delUserByIndex(index)"  class="btn btn-danger">删除</button></td>
                    </tr>
                    <!-- 如果无数据则渲染 -->
                    <tr v-if="persons.length==0">
                        <td colspan="5">暂无数据</td>
                    </tr>
                    <!-- 全部删除 -->
                    <tr v-else>
                        <td colspan="5"><button @click=" delUserByIndex2" class="btn btn-danger" >全部删除</button></td>
                    </tr>
                </tbody>
            </table>
            <div class="mask" v-show="isShow1" @click="cancel1">
                <div class="con" @click="conClick">
                    <button @click="delall">确定</button>
                    <button @click="cancel1">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                persons:localStorage.getItem("persons")? JSON.parse(localStorage.getItem("persons")): [],
                username: '',
                isShow1: false,
            },
            methods: {
                addUser() {
                    if (this.username == '') {
                        confirm('请输入图书名称')
                        return
                    }

                    let user = {
                        addTime: new Date().toLocaleDateString(),//获取当前时间
                        username: this.username,
                    }
                    this.username = ''
                    this.persons.push(user)
                    //存储到本地
                    localStorage.setItem('persons', JSON.stringify(this.persons))
                },

                //自定义遮罩层
                delUserByIndex(index){
                    this.index = index
                    this.isShow1 = true
                    localStorage.setItem('persons', JSON.stringify(this.persons))
                },
                // 全部删除
                delUserByIndex2(index){
                    this.isShow1 = true
                    this.persons=[]
                    localStorage.setItem('persons', JSON.stringify(this.persons))
                },
                cancel1(){
                    this.isShow1 = false
                },
                delall(){
                    this.isShow1 = false
                    index=this.index
                    localStorage.setItem('persons', JSON.stringify(this.persons))
                    this.persons.splice(index, 1)//指哪个下标删除哪个下标每次删除一个
                },
                conClick(ev){
                    ev.stopPropagation()
                }
            },
        })
    </script>
</body>

</html>